<template>
  <div class="member">
    <div class="columns">
      <div class="column is-one-quarter">
        <el-card shadow="never">
          <div slot="header" class="has-text-centered">
            <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <p class="mt-3">{{ finduser.username }}</p>
          </div>
          <div>
            <p class="content">入驻：{{ finduser.createTime }}</p>
            <p class="content">简介：{{ finduser.sign }}</p>
          </div>
        </el-card>
      </div>

      <div class="column">
        <!--用户发布的话题-->
        <el-card class="box-card content" shadow="never">
          <div slot="header" class="has-text-weight-bold">
            <span>帖子</span>
          </div>

          <div v-if="list.length===0">
            暂无话题
          </div>

          <div v-else class="topicUser-info">
            <article v-for="post in list"  :key="post.id" class="media">
              <div class="media-content">
                <div class="content ellipsis is-ellipsis-1">
                  <el-tooltip class="item" effect="dark" :content="post.title" placement="top">
                    <router-link :to="{ name:'postDetail',params:{ id: post.id } }">
                       {{ post.title }} 
                    </router-link>
                  </el-tooltip>
                </div>
                <nav class="level has-text-grey is-size-7">
                  <div class="level-left">
                    <span class="mr-1">
                      发布于: {{ post.createTime }}
                    </span>
                  </div>
                </nav>
              </div>
              <div v-if="token" class="media-right">
                <div v-if="finduser.username === user.username" class="level">
                  <div class="level-item">
                    <a @click="handleDelete(post.id)">
                      <span class="tag is-danger">删除</span>
                    </a>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '../../api/user'
import { mapGetters } from 'vuex'
import { removePost,getUserPost } from '../../api/post'

export default {
  name: 'Profile',
  data() {
    return {
      userId: this.$route.params.id,
      list:[],
      finduser: {},
      topics: {},
    }
  },
  computed: {
    ...mapGetters(['token', 'user'])
  },
  created() {
    this.fetchUserById();
    this.fetchUserPost();
  },
  methods: {
    fetchUserById() {
        // console.log(this.userId);
        getUserInfo(this.userId).then(res=>{
            const result = res.data;
            // console.log(result);
            if(result.code == 0){
                this.finduser = result.data;
                console.log(this.finduser);
            }else{
                this.$message({
                    message: result.msg,
                    type: "error",
                })
            }
        })
    },
    //获取当前用户的帖子
    fetchUserPost(){
        getUserPost(this.userId).then(res=>{
            const result = res.data;
            if(result.code == 0){
                this.list = result.data;
            }else{
                this.$message({
                    message: result.msg,
                    type: "error",
                })
            }
        })
    },
    //删除
    handleDelete(pid) {
        removePost(pid).then(res=>{
          const result = res.data;
          if(result.code == 0){
            this.$message({
              message: result.msg,
              type: "success",
            });
            this.$router.push("/");
          }else{
            this.$message({
              message: result.msg,
              type: "error",
            });
          }
        })
    }
  }
}
</script>

<style scoped>

</style>